{include file="public/header"}
<title>租房列表</title>
<style>
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    /*头部*/
    .top {
        height: 60px;
        width: 100%;
        background: rgba(22, 26, 39, 1);
    }

    .top_box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        align-items: center;

    }

    .top_name_left {
        width: 38px;
        height: 38px;
        background: rgba(52, 99, 230, 1);
        border-radius: 10px;
        margin-right: 10px;
    }

    .top_name {
        height: 60px;
        font-size: 24px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 60px;
    }

    .top_name_r {
        width: 76px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 1);
        margin-left: 26px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .top_name_r img {
        height: 16px;
        width: 16px;
    }

    .top_name_r span {
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-left: 3px;
    }

    .lii {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #84868D;
        line-height: 22px;
        margin-right: 24px;
    }

    .white {
        color: #fff;
    }

    .top_login {
        margin-left: 36px;
        display: flex;
        align-items: center;
    }

    .top_login img {
        width: 28px;
        height: 28px;
    }

    .top_login span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-left: 8px;
    }

    .top_marginR {
        margin-right: 16px;
    }

    /*头部*/

    /*footer2样式*/
    .footer2 {
        width: 100%;
        height: 168px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -8px 20px 0px rgba(0, 0, 0, 0.04);
    }

    .footerint {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    .footer_word {
        padding-top: 20px;
        padding-left: 268px;
    }

    .footer_word span {
        width: 420px;
        height: 68px;
        font-size: 22px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 34px;
        margin-bottom: 25px;
    }

    .footer_js {
        height: 21px;
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 21px;
        margin-right: 25px;
    }

    .footer_ma {
        width: 120px;
        height: 120px;
        padding-top: 25px;
        padding-right: 75px;
    }

    .footer_ma img {
        width: 100%;
        height: 100%;
    }

    .footer_phone {
        width: 145px;
        height: 200px;
        position: absolute;
        bottom: 0;
        left: 94px;
        box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.08);
    }

    .footer_phone img {
        width: 100%;
        height: 100%;
    }

    .footer_del {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 17px;
        right: 3px;
    }

    .footer_del img {
        width: 100%;
        height: 100%;
    }

    /*footer2样式*/
    /*内容*/
    .content {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 130px;
    }

    .navigation {
        height: 56px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        display: flex;
        align-items: center;
    }

    .navigation img {
        height: 14px;
        width: 14px;
    }

    .option {
        width: 100%;
        background: rgba(251, 251, 251, 1);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px;
        padding-bottom: 17px;
    }

    .option_top {
        width: 1160px;
        height: 50px;
        border-radius: 4px 4px 0px 0px;
        margin: 0 20px;
        border-bottom: 1px solid rgba(237, 237, 237, 1);
        line-height: 50px;
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 17px;
    }

    .option_top span {
        margin-right: 20px;
    }

    .option_top span:first-child {
        margin-right: 24px;
    }

    .colorblue {
        color: #3463E6;
    }

    .option_change {
        width: 1160px;
        margin: 0 20px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 20px;
        height: 18px;
        display: flex;
        align-items: center;
    }

    .option_change span {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        margin-right: 25px;
        margin-left: 6px;
    }

    .option_change span:first-child {
        margin-left: 0px;
    }

    input[type=radio],input[type=checkbox] {
        /*去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        /*自定义样式*/
        height: 12px;
        width: 12px;
        background: url('__IMG__/radio.png') no-repeat center center;
        background-size: 12px 12px;
        cursor: pointer;
    }

    input[type=radio]:checked,input[type=checkbox]:checked {
        background: url('__IMG__/radio_c.png') no-repeat center center;
        background-size: 12px 12px;
    }

    /*列表的样式在这里*/
    .con_li {
        height: 184px;
        width: 100%;
        margin-top: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .con_li > img {
        width: 245px;
        height: 100%;
    }

    .con_li > span {
        height: 32px;
        font-size: 26px;
        font-family: Helvetica-Bold;
        font-weight: bold;
        color: rgba(231, 99, 76, 1);
    }

    .con_li > span > span {
        font-size: 14px;
        font-weight: 500;
    }

    .con_li_word {
        height: 100%;
        margin-left: 20px;
    }

    .con_li_top {
        height: 24px;
        font-size: 22px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        margin-bottom: 20px;
    }

    .con_li_ion {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .con_li_ion_marginb {
        margin-bottom: 16px;
    }

    .con_li_ion > img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

    .con_li_label {
        height: 30px;
        margin-top: 24px;
    }

    .con_li_labels {
        min-width: 60px;
        height: 30px;
        background: rgba(230, 237, 255, 1);
        border-radius: 4px;
        margin-right: 10px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(53, 86, 179, 1);
        line-height: 30px;
        text-align: center;
        padding: 0 10px;
    }
    .quyu{
        cursor: pointer;
    }
    /*列表的样式在这里*/
    /*内容*/
</style>
<body>

<div class="content">
    <div class="navigation">
        <span>置家优选</span>
        <img src="__IMG__/jiantou_right.png" alt="">
        <span>{$Think.session.my_location_city_name}租房</span>
    </div>
    <div class="option">
        <div class="option_top">
            <span>区域</span>
            <span class="quyu {$search.0?:'colorblue'}" data-id="">不限</span>
            {volist name='qus' id='q'}
            <span class="quyu {$search.0==$q.district_id?'colorblue':''}" data-id="{$q.district_id}">{$q.district}</span>
            {/volist}
        </div>

        <div class="option_change">
            <span>价格</span>
            <input type="radio" value="" name="price" {$search.1 ? '' : 'checked'} /><span>不限</span>
            <input type="radio" value="1" name="price" {$search.1==1 ? 'checked' : ''}/><span>1000-2000元</span>
            <input type="radio" value="2" name="price" {$search.1==2 ? 'checked' : ''}/><span>2000-3000元</span>
            <input type="radio" value="3" name="price" {$search.1==3 ? 'checked' : ''}/><span>3000-4000元</span>
            <input type="radio" value="4" name="price" {$search.1==4 ? 'checked' : ''}/><span>4000-5000元</span>
            <input type="radio" value="5" name="price" {$search.1==5 ? 'checked' : ''}/><span>5000-6000元</span>
            <input type="radio" value="6" name="price" {$search.1==6 ? 'checked' : ''}/><span>6000-7000元</span>
            <input type="radio" value="7" name="price" {$search.1==7 ? 'checked' : ''}/><span>7000-8000元</span>
            <input type="radio" value="8" name="price" {$search.1==8 ? 'checked' : ''}/><span>8000元以上</span>
        </div>

        <div class="option_change">
            <span>面积</span>
            <input type="radio" value="" name="mianji" {$search.2 ? '' : 'checked'} /><span>不限</span>
            <input type="radio" value="1" name="mianji" {$search.2==1 ? 'checked' : ''}/><span>50m²以下</span>
            <input type="radio" value="2" name="mianji" {$search.2==2 ? 'checked' : ''}/><span>50-80m²</span>
            <input type="radio" value="3" name="mianji" {$search.2==3 ? 'checked' : ''}/><span>80-110m²</span>
            <input type="radio" value="4" name="mianji" {$search.2==4 ? 'checked' : ''}/><span>110-150m²</span>
            <input type="radio" value="5" name="mianji" {$search.2==5 ? 'checked' : ''}/><span>150m²以上</span>
        </div>

        <div class="option_change">
            <span>户型</span>
            <input type="radio" value="" name="shis" {$search.3 ? '' : 'checked'}/><span>不限</span>
            <input type="radio" value="1" name="shis" {$search.3==1 ? 'checked' : ''}/><span>一室</span>
            <input type="radio" value="2" name="shis" {$search.3==2 ? 'checked' : ''}/><span>二室</span>
            <input type="radio" value="3" name="shis" {$search.3==3 ? 'checked' : ''}/><span>三室</span>
            <input type="radio" value="4" name="shis" {$search.3==4 ? 'checked' : ''}/><span>四室</span>
            <input type="radio" value="5" name="shis" {$search.3==5 ? 'checked' : ''}/><span>五室</span>
            <input type="radio" value="6" name="shis" {$search.3==6 ? 'checked' : ''}/><span>五室以上</span>
        </div>

        <div class="option_change">
            <span>装修</span>
            <input type="radio" value="" name="fix" {$search.4 ? '' : 'checked'}/><span>不限</span>
            <input type="radio" value="1" name="fix" {$search.4==1 ? 'checked' : ''}/><span>简装</span>
            <input type="radio" value="2" name="fix" {$search.4==2 ? 'checked' : ''}/><span>中装</span>
            <input type="radio" value="3" name="fix" {$search.4==3 ? 'checked' : ''}/><span>精装</span>
            <input type="radio" value="4" name="fix" {$search.4==4 ? 'checked' : ''}/><span>毛坯</span>
        </div>

        <div class="option_change">
            <span>朝向</span>
            <input type="radio" value="" name="face" {$search.5 ? '' : 'checked'}/><span>不限</span>
            <input type="radio" value="1" name="face" {$search.5==1 ? 'checked' : ''}/><span>东</span>
            <input type="radio" value="2" name="face" {$search.5==2 ? 'checked' : ''}/><span>南</span>
            <input type="radio" value="3" name="face" {$search.5==3 ? 'checked' : ''}/><span>西</span>
            <input type="radio" value="4" name="face" {$search.5==4 ? 'checked' : ''}/><span>北</span>
            <input type="radio" value="5" name="face" {$search.5==5 ? 'checked' : ''}/><span>南北</span>
            <input type="radio" value="6" name="face" {$search.5==6 ? 'checked' : ''}/><span>东西</span>
            <input type="radio" value="7" name="face" {$search.5==7 ? 'checked' : ''}/><span>东南</span>
            <input type="radio" value="8" name="face" {$search.5==8 ? 'checked' : ''}/><span>西南</span>
            <input type="radio" value="9" name="face" {$search.5==9 ? 'checked' : ''}/><span>东北</span>
            <input type="radio" value="10" name="face" {$search.5==10 ? 'checked' : ''}/><span>西北</span>
        </div>

        <div class="option_change">
            <?php $signphp = [];if($search[6] && $search[6] != 100){ $signphp = explode(',',trim($search[6],',')); }; ?>
            <span>标签</span>
            <input type="checkbox" value="10" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(10,$signphp)}checked{/if} /><span>短租</span>
            <input type="checkbox" value="11" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(11,$signphp)}checked{/if} /><span>拎包入住</span>
            <input type="checkbox" value="12" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(12,$signphp)}checked{/if} /><span>精装修</span>
            <input type="checkbox" value="13" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(13,$signphp)}checked{/if} /><span>配套完善</span>
            <input type="checkbox" value="14" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(14,$signphp)}checked{/if} /><span>可供暖</span>
            <input type="checkbox" value="15" name="sign[]" {$search.6 ? '' : 'checked'} {$search.6==100 ? 'checked' : ''} {if in_array(15,$signphp)}checked{/if} /><span>停车方便</span>
        </div>
        
        <div class="option_change">
            <span>来源</span>
            <input type="radio" value="" name="user_type" {$search.7 ? '' : 'checked'}/><span>不限</span>
            <input type="radio" value="2" name="user_type" {$search.7==2 ? 'checked' : ''}/><span>经纪人</span>
            <input type="radio" value="1" name="user_type" {$search.7==1 ? 'checked' : ''}/><span>个人</span>
        </div>
        <div class="option_change">
            <span>看房时间</span>
            <input type="radio" value="" name="kan" {$search.8 ? '' : 'checked'}/><span>不限</span>
            <input type="radio" value="1" name="kan" {$search.8==1 ? 'checked' : ''}/><span>随时看房</span>
            <input type="radio" value="2" name="kan" {$search.8==2 ? 'checked' : ''}/><span>电话预约</span>
            <input type="radio" value="3" name="kan" {$search.8==3 ? 'checked' : ''}/><span>休息日</span>
        </div>
        <div class="option_change">
            <?php $morephp = [];if($search[9] && $search[9] != 100){ $morephp = explode(',',trim($search[9],',')); }; ?>
            <span>房屋配置</span>
            <input type="checkbox" value="7" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(7,$morephp)}checked{/if} /><span>床</span>
            <input type="checkbox" value="8" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(8,$morephp)}checked{/if} /><span>沙发</span>
            <input type="checkbox" value="9" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(9,$morephp)}checked{/if} /><span>电视</span>
            <input type="checkbox" value="10" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(10,$morephp)}checked{/if} /><span>冰箱</span>
            <input type="checkbox" value="11" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(11,$morephp)}checked{/if} /><span>热水器</span>
            <input type="checkbox" value="12" name="more[]" {$search.9 ? '' : 'checked'} {$search.9==100 ? 'checked' : ''} {if in_array(12,$morephp)}checked{/if} /><span>空调</span>
        </div>
    </div>


    <!--列表的样式在这里-->
    {volist name='data' id='d'}
    <div class="con_li"  onclick="godetail({$d.h_id});">
        <img src="{$d.h_img}" alt="" style="object-fit: cover;">
        <div class="con_li_word flex-con">
            <div class="con_li_top">
                {$d.h_title}
            </div>
            <div class="con_li_ion">
                <img src="__IMG__/ion2.png" alt="">
                <span>{$d.district}/{$d.h_xiaoqu}</span>
            </div>
            <div class="con_li_ion con_li_ion_marginb">
                <img src="__IMG__/home.png" alt="">
                <span>{$d.h_shis}室{$d.h_tings}厅</span>
            </div>
            <div class="con_li_ion">
                <img src="__IMG__/area.png" alt="">
                <span>{$d.h_mianji}m² </span>
            </div>
            <div class="con_li_label flex-wrap">
                <?php $d['h_sign'] = explode(',',trim($d['h_sign'],',')); ?>
                {volist name="$d['h_sign']" id='h'}
                <div class="con_li_labels">
                    {$types[$h]}
                </div>
                {/volist}
            </div>
        </div>
        <span>{$d.h_price}元<span>/月</span></span>
    </div>
    {/volist}
    <!--列表的样式在这里-->
    <ul class="pagination flex-con" style="display: flex;justify-content: flex-end;">
        {$data->render()}
    </ul>
</div>
<form id="allsearchs">
    <!--1、区-->
    <input type="hidden" id="qu" name="search[]" value="{$search.0?:''}" />
    <!--2、价格-->
    <input type="hidden" id="price" name="search[]" value="{$search.1?:''}" />
    <!--3、面积-->
    <input type="hidden" id="mianji" name="search[]" value="{$search.2?:''}" />
    <!--4、户型-->
    <input type="hidden" id="shis" name="search[]" value="{$search.3?:''}" />
    <!--5、装修-->
    <input type="hidden" id="fix" name="search[]" value="{$search.4?:''}" />
    <!--6、朝向-->
    <input type="hidden" id="face" name="search[]" value="{$search.5?:''}" />
    <!--7、标签-->
    <input type="hidden" id="sign" name="search[]" value="{$search.6?:100}" />
    <!--8、来源-->
    <input type="hidden" id="user_type" name="search[]" value="{$search.7?:''}" />
    <!--9、看房时间-->
    <input type="hidden" id="kan" name="search[]" value="{$search.8?:''}" />
    <!--10、房屋配置-->
    <input type="hidden" id="more" name="search[]" value="{$search.9?:100}" />

</form>
</body>
{include file="public/footer"}
<script>
    //-------------------跳转到详情----------------------
    function godetail(hid) {
        window.location.href = '/home/Index/houseInfo?h_id='+hid;
    }
    //-----------------------end------------------
    //1、区域
    $('.quyu').click(function () {
        var val = $(this).attr('data-id');
        $(this).addClass('colorblue').siblings().removeClass('colorblue');
        $('#qu').val(val);
        goSearch();
    });
    //2、价格
    $('input[name="price"]').click(function () {
        var val = $(this).val();
        $('#price').val(val);
        goSearch();
    });
    //3、面积
    $('input[name="mianji"]').click(function () {
        var val = $(this).val();
        $('#mianji').val(val);
        goSearch();
    });
    //4、户型
    $('input[name="shis"]').click(function () {
        var val = $(this).val();
        $('#shis').val(val);
        goSearch();
    });
    //5、装修
    $('input[name="fix"]').click(function () {
        var val = $(this).val();
        $('#fix').val(val);
        goSearch();
    });
    //6、朝向
    $('input[name="face"]').click(function () {
        var val = $(this).val();
        $('#face').val(val);
        goSearch();
    });
    //7、标签
    $('input[name="sign[]"]').click(function () {
        if($('input[name="sign[]"]:checked').length <= 0){
            $('#sign').val(-1);
        }else if($('input[name="sign[]"]:checked').length >= 6){
            $('#sign').val(100);
        }else{
            var str = '';
            $('input[name="sign[]"]:checked').each(function (i,d) {
                var val = d.value;
                str += val+',';
            });
            $('#sign').val(str);
        }
        goSearch();
    });
    //8、来源
    $('input[name="user_type"]').click(function () {
        var val = $(this).val();
        $('#user_type').val(val);
        goSearch();
    });
    //9、看房时间
    $('input[name="kan"]').click(function () {
        var val = $(this).val();
        $('#kan').val(val);
        goSearch();
    });
    //7、标签
    $('input[name="more[]"]').click(function () {
        if($('input[name="more[]"]:checked').length <= 0){
            $('#more').val(-1);
        }else if($('input[name="more[]"]:checked').length >= 6){
            $('#more').val(100);
        }else{
            var str = '';
            $('input[name="more[]"]:checked').each(function (i,d) {
                var val = d.value;
                str += val+',';
            });
            $('#more').val(str);
        }
        goSearch();
    });
    function goSearch() {
        var data = $('#allsearchs').serialize();
//        alert(data);
        window.location.href = '/home/Listzu/homePage?' + data;
    }
</script>